<template>
  <div id="app">
    <h2>测试题</h2>
    <Subject
      v-for="(item, index) in numbersList"
      :key="index"
      :index="index"
      :num1="item.num1"
      :num2="item.num2"
      :sum="item.num1 + item.num2"
      @subsum="submitFFn"
    />
    <div>
      <Flag
        v-for="(item, index) in InfoList"
        :key="index"
        :order="index + 1"
        :InfoList="item"
      />
    </div>
  </div>
</template>

<script>
import Subject from "./components/Subject.vue";
import Flag from "./components/Flag.vue";

export default {
  data() {
    return {
      InfoList: [
        { colorClass: "undo", msg: "未完成" },
        { colorClass: "undo", msg: "未完成" },
        { colorClass: "undo", msg: "未完成" },
        { colorClass: "undo", msg: "未完成" },
        { colorClass: "undo", msg: "未完成" },
      ],
      numbersList: [
        {
          num1: parseInt(Math.random() * 100),
          num2: parseInt(Math.random() * 100),
        },
        {
          num1: parseInt(Math.random() * 100),
          num2: parseInt(Math.random() * 100),
        },
        {
          num1: parseInt(Math.random() * 100),
          num2: parseInt(Math.random() * 100),
        },
        {
          num1: parseInt(Math.random() * 100),
          num2: parseInt(Math.random() * 100),
        },
        {
          num1: parseInt(Math.random() * 100),
          num2: parseInt(Math.random() * 100),
        },
      ],
      sumVM:[]
    };
  },
  methods: {
    submitFFn(sum, val, i) {
      console.log(sum, val, i);
      //console.log(!val);
      if (!val) {
        return this.InfoList[i].colorClass, this.InfoList[i].msg;
      }
      if (sum == val) {
        return (
          (this.InfoList[i].colorClass = "right"),
          (this.InfoList[i].msg = "正确")
        );
      }
      (this.InfoList[i].colorClass = "error"), (this.InfoList[i].msg = "错误");
    },
  },
  components: {
    Subject,
    Flag,
  },
};
</script>

<style>
body {
  background-color: #eee;
}

#app {
  background-color: #fff;
  width: 500px;
  margin: 50px auto;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 2em;
}
</style>
